<script setup lang="ts">
import { ref } from 'vue'
const activeTab = ref()

const movieDetails = ref([
    {
        id: 1,
        name: '电影1',
        date: '5月10日',
        title: 'aaa',
        desc: '120 mins',
        children: [
            {
                id: 11,
                name: '电影1',
                beginTime: '10:00',
                endTime: '12:00',
                type: '2D',
                place: '2号厅',
                price: '100元',
                status: '热映中'
            },
            {
                id: 22,
                name: '电影1',
                beginTime: '10:00',
                endTime: '12:00',
                type: '2D',
                place: '2号厅',
                price: '100元',
                status: '热映中'
            }
        ]
    },
    {
        id: 2,
        name: '电影2',
        date: '5月11日',
        title: 'aaa',
        desc: '120 mins',
        children: [
            {
                id: 33,
                name: '电影2',
                beginTime: '11:00',
                endTime: '12:30',
                type: '2D',
                place: '2号厅',
                price: '200元',
                status: '热映中'
            },
            {
                id: 44,
                name: '电影1',
                beginTime: '10:00',
                endTime: '12:00',
                type: '2D',
                place: '2号厅',
                price: '100元',
                status: '热映中'
            }
        ]
    }
])
const onSelectSeats = (status) => {
    if (status === '热映中') {
        // 购买
        uni.navigateTo({
            url: '/pages-home/ticketSeats?id=22'
        })
    } else {
        // 想看
    }
}
</script>

<template>
    <view>
        <wd-tabs v-model="activeTab" slidable="always">
            <block v-for="item in movieDetails" :key="item">
                <wd-tab :title="`${item.date}`">
                <view class="content">
                    <view class="cotent-topic">
                        <wd-img src="/static/movie_bg.png" />
                        <wd-text>{{item.desc}}</wd-text>
                    </view>
                    <view class="content-list">
                        <view v-for="dataItem in item.children" :key="dataItem.id" class="flex">
                            <wd-img :width="50" :height="100"></wd-img>
                            <view class="flex items-center gap-4">
                                <view class="flex flex-col">
                                    <view class="title">{{ dataItem.beginTime }}</view>
                                    <view class="title">{{ dataItem.endTime }}</view>
                                </view>
                                <view class="flex flex-col">
                                    <view class="info">{{ dataItem.type }}</view>
                                    <view class="info">{{ dataItem.place }}</view>
                                </view>
                                <view class="info">{{ dataItem.price }}</view>
                                <wd-button @click="onSelectSeats(dataItem.status)">{{ dataItem.status === '热映中'? '购票' : '想看'}}</wd-button>
                            </view>
                        </view>
                    </view>
                </view>
                </wd-tab>
            </block>
        </wd-tabs>
    </view>
</template>

<style></style>

<route type="page" lang="json">
{
  "layout": "tabbar",
  "name": "购票详情",
  "style": {
    "navigationBarTitleText": "购票详情"
  }
}
</route>